<!DOCTYPE html>
<html lang="zh-cn">
<!-- 声明，本代码，可以拿去非商业正规分享使用。但是请在你的页面给个龙码官网，友情超级链接，谢谢！-->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>汉心码字根训练</title>
    <style>
        .bold {
            font-weight: bold;
        }

        body {
            background-color: #f4f4f4;
            font-family: Arial, sans-serif;
            text-align: center;
            /* 水平居中 */
        }

        .容器 {
            max-width: 800px;
            margin: 50px auto;
            text-align: center;
            padding: 20px;
            padding-top: 50px;
            padding-bottom: 80px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        h1 {
            color: #333;
        }

        #用户输入 {
            padding: 9px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-top: 20px;
        }

        button {
            padding: 8px 12px;
            font-size: 16px;
            background-color: transparent;
            color: rgb(34, 34, 34);
            border: 1px solid rgb(117, 117, 117);
            /* 添加边框 */
            border-radius: 5px;
            cursor: pointer;
            margin-top: 10px;
            transition: background-color 0.3s;
        }


        button:hover {
            background-color: #45a049;
        }

        .错误消息 {
            color: red;

            font-size: 40px;
        }

        .所有根 {
            margin-top: 40px;
        }

        h2 {
            color: #333;
        }

        h1 {
            color: #45a049;
            font-size: 40px;
        }

        #当前根显示 {
            font-size: 60px;
        }


        .toggle-button {
            width: 40px;
            height: 20px;
            background-color: #4CAF50;

            border-radius: 20px;
            position: relative;
            cursor: pointer;
            transition: background-color 0.2s;

        }

        .slider {
            width: 18px;
            height: 18px;
            background-color: #fff;
            border-radius: 50%;
            position: absolute;
            top: 1px;
            left: 1px;
            transition: transform 0.2s;
        }

        .toggle-button.active {
            background-color: #888;

        }

        .toggle-button.active .slider {
            transform: translateX(20px);
        }

        .container {
            display: flex;
            flex-direction: row;

            align-items: center;


            float: right;
        }

        .toggle-button {
            margin: 0 10px;

        }

        a {
            text-decoration: none;
            /* 去掉下划线 */
            color: black;
            /* 设置文字颜色为黑色 */
        }


        .container2 {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #当前根显示,
        .错误消息 {
            display: inline-block;
        }
    </style>
</head>

<body>
    <div class="容器">

        <h1>汉心码字根助记程序</h1>

        <a href="#" class="link0">最少熟悉</a>
        <a href="#" class="link1">全部表上字根</a>


        <div class="container2">
            <div id="当前根显示"></div>
            <div class="错误消息" id="错误消息"></div>
        </div>


        <input type="text" id="用户输入" placeholder="按空格键学习">







        <details class="所有根">
            <summary>本段所有字根</summary>
            <div id="所有根显示">
            </div>
        </details>

        <details>
            <summary>更多功能和说明</summary>
            <div>
                <button id="打开文件按钮">打开本地txt文件学习</button>
                <button onclick="shuffleList()">打乱字根顺序</button>

                <!-- <button id="启用空格" onclick="切换提交模式()">空格提交</button> -->
                <p>不训练也能用，记不清的，用oopp加拼音查就可以了。查多就会了。最少熟悉 里熟悉记忆一下就可以了，全部的不一定要记。</p>
 
            </div>
        </details>

        <div class="container">

            <div class="toggle-button" onclick="切换语音()">
                <div class="slider"></div>
            </div>
             <!-- <div>电脑语音开关</div>-->

        </div>

    </div>
    <a href="https://hanxinma.gitlab.io/"><b>首页</b> </a>
    <!-- 声明，本代码，可以拿去非商业正规分享使用。但是请在你的页面给个官网，友情超级链接，谢谢！-->
  <a href="zy.html"><b>成字入门测试</b> </a>
    <script>


        let 根队列 = ['囗\tw', 'ㄥ\tv', '⺈\te', '⺮\tv', '⻊\tz', '宀\tg', '疒\tb', '刂\td', '卩\te', '丶\td', '攵\tw', '匚\tk', '缶\tf', '弗\tf', '戈\tg', '纟\ts', '冫\td', '木\tl', '廿\tc', '朩\tx', '冖\tg', '日\to', '彡\tp', '氵\td', '山\ts', '饣\tu', '礻\tp', '丨\ta', '忄\tx', '厶\tv', '扌\tf', '亠\tw', '𧘇\th', '小口\tk', '幺\ts', '一\ta', '衤\tp', '乂\tx', '廴\tz', '酉\ty', '月\to', '爫\tp', '乛\tv', '辶\tz', '阝\te', '龴\tv'];
        let 根队列0 = ['囗\tw', 'ㄥ\tv', '⺈\te', '⺮\tv', '⻊\tz', '宀\tg', '疒\tb', '刂\td', '卩\te', '丶\td', '攵\tw', '匚\tk', '缶\tf', '弗\tf', '戈\tg', '纟\ts', '冫\td', '木\tl', '廿\tc', '朩\tx', '冖\tg', '日\to', '彡\tp', '氵\td', '山\ts', '饣\tu', '礻\tp', '丨\ta', '忄\tx', '厶\tv', '扌\tf', '亠\tw', '𧘇\th', '小口\tk', '幺\ts', '一\ta', '衤\tp', '乂\tx', '廴\tz', '酉\ty', '月\to', '爫\tp', '乛\tv', '辶\tz', '阝\te', '龴\tv'];
        let 根队列1 = ['扌\tf', '缶\tf', '攵\tw', '彳\tr', '八\tb', '犭\tq', '小口\tk', '饣\tu', '丶\td', '厂\ti', '爫\tp', '礻\tp', '乛\tv', '四\ts', '𧘇\th', '⻊\tz', '匕\tb', '十\tu', '冫\td', '廴\tz', '目\tm', '匚\tk', '朩\tx', '讠\ty', '忄\tx', '西\tx', '弗\tf', '王\tw', '立\tl', '丿\tp', '厶\tv', '木\tl', '疒\tb', '亻\tr', '衤\tp', '丨\ta', '戈\tg', '囗\tw', '幺\ts', '廿\tc', '乀\tn', 'ㄥ\tv', '辶\tz', '纟\ts', '阝\te', '亠\tw', '山\ts', '火\th', '方\tf', '米\tm', '卩\te', '⺈\te', '龴\tv', '⺮\tv', '冖\tg', '刂\td', '田\tt', '月\to', '禾\th', '日\to', '广\tg', '人\tr', '乂\tx', '宀\tg', '钅\tj', '氵\td', '彡\tp', '土\tt', '酉\ty', '一\ta', '艹\tc'];


        document.querySelector(".link0").addEventListener("click", function () {
            根队列 = [...根队列0];
            显示当前根();
            显示所有根();
        });


        document.querySelector(".link1").addEventListener("click", function () {
            根队列 = [...根队列1];
            显示当前根();
            显示所有根();
        });





        document.getElementById('打开文件按钮').addEventListener('click', function () {
            const 输入框 = document.createElement('input');
            输入框.type = 'file';
            输入框.accept = '.txt';
            输入框.addEventListener('change', function () {
                const 文件 = 输入框.files[0];
                const 读取器 = new FileReader();
                读取器.onload = function () {
                    const 新字根 = 读取器.result;
                    const 新根队列 = 新字根.split('\n').map(line => line.trim());

                    // 更新根队列
                    根队列 = 新根队列;

                    显示当前根();
                    显示所有根();
                };
                读取器.readAsText(文件);
            });
            输入框.click();


        });



        let 对应次数队列 = Array(根队列.length).fill(0)
        let 当前索引 = 0;

        function 显示当前根() {
            let 当前根显示 = document.getElementById("当前根显示");
            当前根显示.innerHTML = 根队列[当前索引].split("\t")[0];
        }


        // 语音模块


        function 显示所有根() {
            let 所有根显示 = document.getElementById("所有根显示");
            所有根显示.innerHTML = "";
            根队列.forEach((项目, 索引) => {
                let 根 = 项目.split("\t")[1];
                let 字 = 项目.split("\t")[0];
                let div = document.createElement("div");
                div.className = "队列项";
                div.innerText = (索引 + 1) + ": " + 字 + "=" + 根;
                所有根显示.appendChild(div);
            });
        }


        function 后移(移动距离) {
            移动距离 = Math.min(移动距离, 根队列.length - 1)// 最多只能后移 队列长度-1
            let tmp
            tmp = 根队列[当前索引]
            根队列.splice(当前索引, 1) // 删最前面
            根队列.splice(当前索引 + 移动距离, 0, tmp) // 插入

            tmp = 对应次数队列[当前索引]
            对应次数队列.splice(当前索引, 1) // 删最前面
            对应次数队列.splice(当前索引 + 移动距离, 0, tmp) // 插入
        }



        function 检查答案() {
            let 用户输入 = document.getElementById("用户输入").value; //.value.trim(); 如果用空格提交需要启用这个
            let 正确答案 = 根队列[当前索引].split("\t")[1];
            let 错误消息 = document.getElementById("错误消息");

            let 错题 = 错误消息.innerText.substring(0, 2);

            if (用户输入 === 正确答案) {
                setTimeout(function () {
                    document.getElementById("用户输入").value = "";
                }, 200);
                错误消息.innerText = "";

                对应次数队列[当前索引] += 1;

                if (对应次数队列[当前索引] > 3) {
                    后移(对应次数队列[当前索引] * 100);
                }

                else if (对应次数队列[当前索引] === 3) {
                    后移(对应次数队列[当前索引] * 7);
                }

                else {
                    后移(对应次数队列[当前索引] * 4);
                }

                显示当前根();
                显示所有根();


            } else {
                对应次数队列[当前索引] = 0;
                setTimeout(function () {
                    document.getElementById("用户输入").value = "";
                }, 200);
                // 将正确答案显示在页面上
                错误消息.innerText = " " + 正确答案;
            }
        }



        显示当前根();
        // 不一样 
        显示所有根();
        document.getElementById("用户输入").focus(); // 页面加载时将焦点设置在输入框上  let 输入内容 = event.target.value.trim();



        // 语音模块-------------------------

        let 启用语音 = true;


        function 切换语音() {
            启用语音 = !启用语音;
            const toggleButton = document.querySelector('.toggle-button');
            toggleButton.classList.toggle('active', !启用语音);
        }

        function 读取字根() {
            if (启用语音) { // 只有在启用语音状态下才读取字根
                let 当前字根 = 根队列[当前索引].split("\t")[2];

                // 创建一个新的SpeechSynthesisUtterance对象
                const utterance = new SpeechSynthesisUtterance(当前字根);
                utterance.lang = 'zh-CN';

                // 使用浏览器内置的语音合成引擎来播放语音
                speechSynthesis.speak(utterance);
            }
        }
        // 自动语音朗读---移到下面了
        // 空格语音---移到下面了
        // -------------------------语音模块



        // 自动语音朗读---
        // 自动提交--- 

        document.addEventListener('input', function (event) {
            读取字根();
        });


        document.getElementById("用户输入").addEventListener("input", function (event) {
            let 输入内容 = event.target.value;
            if (输入内容 !== "") {
                检查答案();
            }
        });



        // 空格语音---
        // 空格提交--- 上方还需要，改过滤空格符 判断对错

        // let 空格计数器 = 0;
        // document.addEventListener('keydown', function (event) {
        //     if (启用语音 && event.code === 'Space') {
        //         空格计数器++;
        //         读取字根();
        //     }
        // });


        // document.getElementById("用户输入").addEventListener("input", function (event) {
        //     let 输入内容 = event.target.value;
        //     if (输入内容.includes(" ")) {
        //         检查答案();
        //         document.getElementById("用户输入").value = "";
        //     }
        // });
        // document.getElementById("用户输入").addEventListener("keydown", function (event) {
        //     if (event.keyCode === 32) {
        //         event.preventDefault();
        //         检查答案();
        //     } else if (event.keyCode === 13) {
        //         event.preventDefault();
        //         document.getElementById("用户输入").value = "";
        //     }
        // });



        //  操连接 样式更新---

        const links = document.querySelectorAll('a');
        links[0].classList.add('bold'); 
        links.forEach(link => {
            link.addEventListener('click', function (e) {               
                links.forEach(l => {
                    l.classList.remove('bold');
                });
                this.classList.add('bold'); 
                window.location.href = this.getAttribute('href');
            });
        });


        // 打乱字根顺序
        function shuffleList() {
            var currentIndex = 根队列.length, temporaryValue, randomIndex;
            while (0 !== currentIndex) {
                randomIndex = Math.floor(Math.random() * currentIndex);
                currentIndex -= 1;
                temporaryValue = 根队列[currentIndex];
                根队列[currentIndex] = 根队列[randomIndex];
                根队列[randomIndex] = temporaryValue;
                显示当前根();
                显示所有根();
                检查答案();
            }

            var output = document.getElementById("output");
            output.innerHTML = 根队列.join("<br>");
        }


    </script>


</body>

</html>